<html>
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile.custom.structure.min.css" />
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile.custom.theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css"></script>
<script src="jquerymobile/jquery-1.8.2.min.js"></script>
<script src="jquerymobile/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="questionnaire_preparation.js"></script>
<script src="CHANGE_QUESTIONS_HERE.js"></script>
<script src="index.js"></script>
</head>
<body>

<!------------------------------------------------------------------------------------------------------------------------------------
	HTML below this line.
------------------------------------------------------------------------------------------------------------------------------------->

<!-- blank page for home page -->
<div id="blank" data-role="page" data-title="normal_question">
        <h1>Survey</h1>
 
        <div id="questionContainer"></div>
        <div id="answerContainer"></div>
</div>

<!-- normal question template -->
<script id="normal_question" type="text/x-jQuery-tmpl">
	<div>
	    <div data-role='header' data-position='inline'>
		<h1>Question</h1>
	    </div>

		${question}
	
		<button class="show_answer">Answers &gt;&gt;</button>
	    
	    <div data-role="footer" data-theme="a">
		   <div data-role="controlgroup" data-type="horizontal">
		     <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
		     <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
		   </div>
	    </div>
	</div>
</script>

<!-- numerical answers template -->
<script id="numeric_answer" type="text/x-jQuery-tmpl">

	<div>
	    <div data-role='header' data-position='inline'>
		<h1>Answers</h1>
	    </div>

		{{each(answer_index,answer_item) answer_units}}
			<input type="text" class="value" data-unit="${answer_item}" data-mini="true" /> ${answer_item}<br />
		{{/each}}
	
		<button class="next_question">Next &gt;&gt;</button>
	    
	    <div data-role="footer" data-theme="a">
		   <div data-role="controlgroup" data-type="horizontal">
		     <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
		     <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
		   </div>
	    </div>
	</div>
</script>

<!-- radio answers template -->
<div id="radio_other_answer" data-role="page" data-title="radio_answer">
    <div data-role='header' data-position='inline'>
        <h1>Answers</h1>
    </div>

	{{each(answer_index,answer_item) answer_choices}}
		<button class="next_question" value = "${answer_item}" > ${answer_item}</button>
	{{/each}}
	<button class="next_question" value = "other"> Other(specify)</button>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</div>

<!------------------------------------------------------------------------------------------------------------------------------------
	HTML above this line.
------------------------------------------------------------------------------------------------------------------------------------->

</body>
</html>
